const inputEl = document.querySelector('.input1') as HTMLInputElement;
const inputDivEl = document.querySelector('.navigation-input') as HTMLDivElement;
const buttonEl1 = document.querySelector('.navigation-button1') as HTMLButtonElement;
const navEl = document.querySelector('.navigation-outer') as HTMLDivElement;
const leftInEl = document.querySelector('.left-in') as HTMLDivElement;
const leftaEl = document.querySelectorAll('.left-in a') as NodeListOf<HTMLAnchorElement>;
const imgEl1 = document.querySelectorAll('.right-img') as NodeListOf<HTMLElement>;
const tuijianneirongEl = document.querySelectorAll('.tuijianneirong-div1') as NodeListOf<HTMLElement>;
const youxiadivEl = document.querySelector('.youxia-div') as HTMLDivElement;
const cententTopA1El = document.querySelector('.centent-topa1') as HTMLAnchorElement;
const cententTopA2El = document.querySelector('.centent-topa2') as HTMLAnchorElement;
const chufaEl = document.querySelector('.chufaa') as HTMLElement;
chufaEl.style.color = '#333';

let lastScrollY = window.scrollY;
let scrollTimer: number | null | undefined = null;

// 顶部导航条搜索框样式变换
inputEl.addEventListener('focus', function () {
  const inputDiv2El = inputDivEl.querySelector('div') as HTMLDivElement;
  inputDiv2El.style.backgroundColor = '#1e80ff11';
  inputDiv2El.style.color = '#1e80ff';
  buttonEl1.style.display = 'none';
  inputDivEl.style.border = '1px solid #007fff';
});

document.addEventListener('click', function (event: MouseEvent) {
  if (!inputEl.contains(event.target as Node)) {
    const inputDiv2El = inputDivEl.querySelector('div') as HTMLDivElement;
    inputDiv2El.style.backgroundColor = '';
    inputDiv2El.style.color = '';
    buttonEl1.style.display = '';
    inputDivEl.style.width = '';
    inputEl.style.width = '';
    inputDivEl.style.border = '';
  }
});

// 顶部导航条隐藏
function throttledScrollHandler() {
  if (scrollTimer !== null) {
    clearTimeout(scrollTimer);
  }
  const currentScrollY = window.scrollY;
  const scrollDifference = Math.ceil(currentScrollY - lastScrollY);
  const chazhi = Math.abs(scrollDifference);
  if (scrollDifference > 0) {
    if (currentScrollY >= 700 || chazhi > 600) {
      navEl.style.display = 'none';
      leftInEl.style.top = '20px';
    }
  } else {
    if (window.scrollY < 200 || chazhi > 600) {
      navEl.style.display = '';
      leftInEl.style.top = '';
    }
  }
  scrollTimer = setTimeout(function () {
    if (chazhi > 600) {
      lastScrollY = currentScrollY;
    }
  }, 300);
}

document.addEventListener('scroll', throttledScrollHandler);

// 左侧a链接visited效果
leftaEl.forEach((e1) => {
  e1.addEventListener('click', function () {
    leftaEl.forEach((e2) => {
      e2.className = '';
    });
    e1.className = 'abianhuan';
  });
});

// 中间内容小圆点变换函数
function bindEventListeners() {
  const cententneirongdivEl = document.querySelectorAll('.centent-neirongdiv') as NodeListOf<HTMLElement>;
  cententneirongdivEl.forEach((e1) => {
    e1.addEventListener('mouseover', () => {
      const spanEl1 = e1.querySelector('.cententspan2') as HTMLSpanElement;
      if (spanEl1) {
        spanEl1.style.display = 'inline';
      }
    });
    e1.addEventListener('mouseout', () => {
      const spanEl1 = e1.querySelector('.cententspan2') as HTMLSpanElement;
      if (spanEl1) {
        spanEl1.style.display = 'none';
      }
    });
  });

  const cententa1allEl = document.querySelectorAll('.cententa3') as NodeListOf<HTMLElement>;
  cententa1allEl.forEach((e1) => {
    e1.addEventListener('mouseover', () => {
      const spanEl1 = e1.querySelector('.iconfont') as HTMLSpanElement;
      const spanEl2 = e1.querySelector('.num') as HTMLSpanElement;
      spanEl1.style.color = '#1364ce';
      spanEl2.style.color = '#1364ce';
    });
    e1.addEventListener('mouseout', () => {
      const spanEl1 = e1.querySelector('.iconfont') as HTMLSpanElement;
      const spanEl2 = e1.querySelector('.num') as HTMLSpanElement;
      spanEl1.style.color = '';
      spanEl2.style.color = '';
    });
  });
}

// 初始化
bindEventListeners();

// 中间头部推荐最新样式变换
cententTopA1El.addEventListener('click', function () {
  if (!cententTopA1El.classList.contains('chufaa')) {
    cententTopA1El.classList.add('chufaa');
    cententTopA2El.classList.remove('chufaa');
    cententTopA1El.style.color = '#333';
    cententTopA2El.style.color = '';
  }
});

cententTopA2El.addEventListener('click', function () {
  if (!cententTopA2El.classList.contains('chufaa')) {
    cententTopA2El.classList.add('chufaa');
    cententTopA1El.classList.remove('chufaa');
    cententTopA2El.style.color = '#333';
    cententTopA1El.style.color = '';
  }
});

// 中间内容扩展
const cententdivEl = document.querySelector('.centent-neirong') as HTMLDivElement;
const cententnei = document.createElement('div');
cententnei.className = 'centent-neirongdiv';
cententnei.innerHTML = `
  <div class="centent-neirongright">
    <a href="#">
      <div class="centent-neirongdiv1">
        我倒闭 2 年的小网站将重出江湖！
      </div>
      <div class="centent-neirongdiv2">
        这篇文章就简单分享一下当时我开源的面试鸭网站背后的技术，也是我自己很喜欢的一套技术栈，百试不爽，想做个网站的话，非常值得参考。
      </div>
    </a>
    <div class="centent-neirongdiv3">
      <a href="#" class="cententa cententa1">
        程序员鱼皮
      </a>
      <span class="cententspan">|</span>
      <a href="#" class="cententa cententa2">
        <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span>
        4.7k
      </a>
      <a href="#" class="cententa cententa3">
        <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span>
        <span class="num">44</span>
      </a>
      <a href="#"><span class="cententspan2">· · ·</span></a>
      <a href="#" class="cententa4">前端</a>
    </div>
  </div>
  <a href="#"> <img src="../assets/images/cent2.png" alt="" class="centent-neirongimg"></a>`;

function throttle<T extends (...args: any[]) => void>(func: T, limit: number): T {
  let lastFunc: number | null = null;
  let lastRan: number | null = null;
  return function (this: ThisParameterType<T>, ...args: Parameters<T>) {
    if (!lastRan) {
      func.apply(this, args);
      lastRan = Date.now();
    } else {
      if (lastFunc !== null) {
        clearTimeout(lastFunc);
      }
      lastFunc = setTimeout(() => {
        if ((Date.now() - lastRan!) >= limit) {
          func.apply(this, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan!));
    }
  } as T;
}

window.addEventListener('scroll', throttle(function () {
  const scrollTop = window.scrollY;
  const scrollHeight = document.documentElement.scrollHeight;
  const clientHeight = document.documentElement.clientHeight;

  if (scrollTop + clientHeight >= scrollHeight - 1) {
    console.log("已滚动到页面底部");
    for (let i = 1; i <= 10; i++) {
      const newElement = cententnei.cloneNode(true) as HTMLDivElement;
      cententdivEl.appendChild(newElement);
      bindEventListeners();
    }
  }
}, 100));

// 右侧广告内容变换
imgEl1.forEach((e1) => {
  e1.addEventListener('mouseover', () => {
    const iconEl1 = e1.querySelector('.iconfont') as HTMLSpanElement;
    if (iconEl1) {
      iconEl1.style.display = 'inline';
    }
  });
  e1.addEventListener('mouseout', () => {
    const iconEl1 = e1.querySelector('.iconfont') as HTMLSpanElement;
    if (iconEl1) {
      iconEl1.style.display = 'none';
    }
  });
  e1.querySelector('.span123')?.addEventListener('mouseover', function (this: HTMLSpanElement) {
    this.innerText = '投放广告';
    this.style.width = '60px';
    this.style.backgroundColor = '#00000066';
  });
  e1.querySelector('.span123')?.addEventListener('mouseout', function (this: HTMLSpanElement) {
    this.innerText = '广告';
    this.style.width = '';
    this.style.backgroundColor = '';
  });
});

// 右侧推荐话题颜色变换
tuijianneirongEl.forEach((e1) => {
  e1.addEventListener('mouseover', () => {
    const spanEl1 = e1.querySelector('.tuijianneirong-div1-span1') as HTMLSpanElement;
    spanEl1.style.color = '#1e80ff';
  });
  e1.addEventListener('mouseout', () => {
    const spanEl1 = e1.querySelector('.tuijianneirong-div1-span1') as HTMLSpanElement;
    spanEl1.style.color = '';
  });
});

// 右侧作者榜和文章榜变换
document.addEventListener('scroll', function () {
  const wenzhangbangEl = document.querySelector('.wenzhangbang') as HTMLDivElement;
  const zuozhebangEl = document.querySelector('.zuozhebang') as HTMLDivElement;
  if (window.scrollY >= 2100) {
    if (navEl.style.display == 'none') {
      wenzhangbangEl.style.position = 'fixed';
      wenzhangbangEl.style.top = '0px';
      zuozhebangEl.style.position = 'fixed';
      zuozhebangEl.style.top = '320px';
    } else {
      wenzhangbangEl.style.position = 'fixed';
      wenzhangbangEl.style.top = '60px';
      zuozhebangEl.style.position = 'fixed';
      zuozhebangEl.style.top = '380px';
    }
  } else {
    wenzhangbangEl.style.position = '';
    wenzhangbangEl.style.top = '';
    zuozhebangEl.style.position = '';
    zuozhebangEl.style.top = '';
  }
});

const youxiabotton = document.createElement('div');
youxiabotton.className = 'youxia-out3 youxia-out';
youxiabotton.innerHTML = '<button class="youxia2 youxia"><span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span></button>';

// 右下角小浮标变换
window.addEventListener('scroll', function () {
  if (window.scrollY >= 900) {
    if (!youxiadivEl.contains(youxiabotton))
      youxiadivEl.appendChild(youxiabotton);
  } else {
    if (youxiadivEl.contains(youxiabotton))
      youxiadivEl.removeChild(youxiabotton);
  }
});

// 右下角最下浮标点击回归顶部
youxiabotton.querySelector('button')?.addEventListener('click', function () {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});
